import React, { useState } from "react";
import './StyleGrid.less'

function Input({ direction, defaultValue = '-', onChange, onDoubleClick, onBlur, ...props }) {
  const [readonly, setReadonly] = useState(true)
  const __onDoubleClick = (ev) => {
    onDoubleClick && onDoubleClick(ev)
    setReadonly(false)
  }
  const __onBlur = (ev) => {
    onBlur && onBlur(ev)
    setReadonly(true)
  }
  const __onChange = (ev) => {
    onChange && onChange(ev, direction)
  }
  return (
    <input
      type="text"
      readOnly={readonly}
      defaultValue={defaultValue}
      onDoubleClick={__onDoubleClick}
      onBlur={__onBlur}
      onChange={__onChange}
      {...props}
    />
  )
}

function titleCase(str) {
  return str.slice(0,1).toUpperCase() +str.slice(1).toLowerCase();
}

export const StyleGrid = ({ type, children, data = {}, onChange }) => {
  const { top = '-', right = '-', bottom = '-', left = '-' } = typeof data === 'object' ? data : {}
  console.log(type, data)
  const __onChange = (ev, direction) => {
    const __direction = titleCase(direction)
    if (type === 'position') {
      onChange && onChange(ev, ev.target.value, direction)
    } else {
      onChange && onChange(ev, ev.target.value, `${type}${__direction}`)
    }
    // console.log(ev.target.value, direction)
  }
  return (
    <>
      <div className="style-title">
        { data && (<span>{type}</span>) }
      </div>
      <div>
        {
          data && (
            <Input
              defaultValue={top}
              onChange={(ev) => __onChange(ev, `top`)}
            />
          )
        }
      </div>
      <div/>
      <div>
        {
          data && (
            <Input
              defaultValue={left}
              onChange={(ev) => __onChange(ev, `left`)}
            />
          )
        }
      </div>
      {children}
      <div>
        {
          data && (
            <Input
              defaultValue={right}
              onChange={(ev) => __onChange(ev, `right`)}
            />
          )
        }
      </div>
      <div/>
      <div>
        {
          data && (
            <Input
              defaultValue={bottom}
              onChange={(ev) => __onChange(ev, `bottom`)}
            />
          )
        }
      </div>
      <div/>
    </>
  )
}

export default React.memo(({ style, margin, padding, border, onChange }) => {
  let StyleCount = <div className="style-context">{ style.width }×{ style.height }</div>
  const position = ['absolute', 'relative'].includes(style.position)

  const __onChange = (ev, value, attr) => {
    console.log('__onChange', style)
    onChange && onChange(value + 'px', `style.${attr}`)
  }

  if (padding) {
    StyleCount = (
      <div className="style-grid style-padding style-inner">
        <StyleGrid type="padding" data={padding} onChange={__onChange}>{ StyleCount }</StyleGrid>
      </div>
    )
  }

  StyleCount = (
    <div className={`style-grid style-border ${(position || margin) ? 'style-inner' : ''}`}>
      <StyleGrid type="border" data={border} onChange={__onChange}>{ StyleCount }</StyleGrid>
    </div>
  )

  if (margin) {
    StyleCount = (
      <div className={`style-grid style-margin ${position ? 'style-inner' : ''}`}>
        <StyleGrid type="margin" data={margin} onChange={__onChange}>{ StyleCount }</StyleGrid>
      </div>
    )
  }

  return (
    <div className="form-item flex-col flex-center">
      <div className="form-item-label flex flex-align-start">
        <label>盒子样式</label>
      </div>
      <div className={`form-item-control`}>
        <div className={`style-grid style-position ${position ? '' : 'style-empty'}`}>
          <StyleGrid type={position ? style.position : ''} data={style} onChange={__onChange}>{ StyleCount }</StyleGrid>
        </div>
      </div>
      <div className={`form-item-control`}>
        <div className="row form-item flex-center">
          <div className="col-8 form-item-label">
            <label>边框颜色：</label>
          </div>
          <div className={`col-16 form-item-control`}>
            <input
              type="text"
              className="cb-input"
              placeholder="请输入"
            />
          </div>
        </div>
      </div>
    </div>
  )
})